/* @START: Here is the menu style
 * @Author: Hewel
 * @Date: 2018-03-27 17:43:49
 * @Last Modified by: Hewel
 * @Last Modified time: 2018-04-04 00:40:15
 */

#menu-side {
    min-width: $menu-width;
    flex-basis: $menu-width;
    background-color: $card-color;
    box-shadow: $menu-shadow;
    z-index: 10;
    .menu-nav {
        position: relative;
        width: 100%;
        padding-top: $menu-margin-top;
        .menu-list .menu-item {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: $menu-icon-size;
            line-height: $menu-item-line-height;
            color: $main-color;
            transition: 200ms all ease-in-out;
            &:hover {
                color: $base-color;
                background-color: $hover-background-color;
            }
        }
        .menu-mark {
            position: absolute;
            left: 0;
            top: 0;
            width: .5rem;
            height: $menu-item-line-height;
            background-color: $main-color;
            transition: 200ms all ease-out;
        }
        .menu-tip {
            position: absolute;
            left: $menu-width;
            line-height: $menu-item-line-height;
            text-align: center;
            width: $tip-width;
            background-color: $card-color;
            box-shadow: $card-shadow;
            transition: 200ms all ease-out;
            &.hidden {
                visibility: hidden;
            }
            // &::before {

            // }
        }
    }
}
